import advice from '@/assets/s_advice.png';
import top from '@/assets/s_back.png';
import service from '@/assets/s_customer.png';
import down from '@/assets/s_down.png';
import logo from '@/assets/s_service.gif';
import { Divider, FloatButton } from 'antd';
import Words from 'react-words';

import { handleWhatsApp, jumpUrl } from '@/utils';
import { useGetToken } from '@/utils/request';
import { useEffect, useState } from 'react';
import { useIntl, useLocation } from 'umi';
import AdviceModal from '../AdviceModal';
import ContactModal from '../ContactModal';
const FloatButtons = () => {
  const width = 1180;
  const intl = useIntl();
  const router = useLocation();
  const [left, setLeft] = useState(width);
  const btnListName = ['/', '/more', '/land'];
  const routerPathName = router.pathname.replace('/en', '') || '/';
  const [modalVisible, setModalVisible] = useState(false);
  const name =
    routerPathName.split('/').length > 1 ? `/${routerPathName.split('/')[1]}` : routerPathName;
  const handleResize = () => {
    const windowWidth = window.innerWidth;
    if (windowWidth <= width) {
      setLeft(width);
    } else {
      setLeft((windowWidth - width) / 2 + width + 80);
    }
  };
  useEffect(() => {
    // 监听屏幕 获取按钮位置
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  const [visible, setVisible] = useState(true);
  const { token } = useGetToken();
  const [adviceVisible, setAdviceVisible] = useState(false);
  useEffect(() => {
    // 文字动画显示
    const timer = setTimeout(() => {
      setVisible(!visible);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [visible]);

  const list = [
    {
      lable: 'home.contact_service',
      icon: service,
      onClick: () => {
        handleWhatsApp('25223071102');
      },
    },
    {
      lable: 'home.contact_advice',
      icon: advice,
      onClick: () => {
        if (token) {
          setAdviceVisible(true);
        } else {
          jumpUrl('/login');
        }
      },
    },
    { lable: 'home.donwload', icon: down },
  ];
  const isEn = intl.locale == 'en-US';
  return (
    <>
      {btnListName.includes(name) ? (
        <FloatButton.Group className="floatBtn" style={{ left, bottom: 95 }}>
          <div className="floatBtn_content">
            <div
              onClick={() => {
                setModalVisible(true);
              }}
              style={{ cursor: 'pointer', marginTop: -30, textAlign: 'center' }}
            >
              <img className="floatBtn_icon" src={logo} width={56} height={53} />
              <div className="floatBtn_word" style={{ lineHeight: isEn ? '10px' : 'auto' }}>
                <Words show={visible} speed={600}>
                  {intl.formatMessage({ id: 'home.contact_one' })}
                </Words>
              </div>
            </div>
            <div style={{ marginTop: 21 }}>
              {list.map((item, index) => {
                const { icon, lable, onClick } = item;
                return (
                  <div
                    onClick={onClick}
                    style={{ textAlign: 'center', cursor: 'pointer' }}
                    key={lable}
                  >
                    <img style={{ marginBottom: 4 }} src={icon} width={20} />
                    <div style={{ fontSize: 12, color: '#666' }}>
                      {intl.formatMessage({ id: lable })}
                    </div>
                    {index !== list.length - 1 ? (
                      <Divider
                        style={{
                          borderBlockStart: '1px solid #e5e5e5',
                          width: 24,
                          minWidth: 24,
                          margin: '20px auto 14px',
                        }}
                      />
                    ) : null}
                  </div>
                );
              })}
            </div>
          </div>
        </FloatButton.Group>
      ) : null}
      <FloatButton.Group className="floatBtn" style={{ left, bottom: 15 }}>
        <FloatButton.BackTop
          className="floatBtn_top"
          icon={<img src={top} width={26} />}
          visibilityHeight={800}
          description={intl.formatMessage({ id: 'home.contact_back' })}
        />
      </FloatButton.Group>

      <ContactModal
        visible={modalVisible}
        handleCancel={() => {
          setModalVisible(false);
        }}
      />
      <AdviceModal
        visible={adviceVisible}
        handleCancel={() => {
          setAdviceVisible(false);
        }}
        handleOK={() => {
          setAdviceVisible(false);
        }}
      />
    </>
  );
};
export default FloatButtons;
